<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>

   <style>
      div {
         width: 200px;
         height: 200px;
         background-color: lightblue;
         position: fixed;
         right: 0;
         bottom: -200;
      }
   </style>
</head>

<body>
   <div></div>
   <h3 id="h3">5s后自动关闭</h3>
   <a id="a3" href="javascript:delTimeout()">点此留在本页</a>

   <script>
      //例: setInterval
      var bottom = -200;
      var div = document.querySelector("div");

      function move() {
         bottom += 5;
         if (bottom == 0) {
            clearInterval(timer);
         } else {
            div.style.bottom = `${bottom}px`;
         }
      }
      var timer = setInterval(move, 25);

      //例: setTimeout
      var h3 = document.getElementById("h3");
      var a3 = document.getElementById("a3");

      function calc() {
         var n = parseInt(h3.innerHTML);
         n--;
         if (n > 0) {
            h3.innerHTML = `${n}s后自动关闭`;
         } else {
            close();
         }
      }

      var timer2 = setInterval(calc, 1000);
      a3.onclick = function () {
         clearInterval(timer2);
      }
   </script>
</body>

</html>